import { RouteComponent } from 'vue-router'
import { defineStore } from 'pinia'
import { Dictionary } from '@/api/config'
import {getLocalData, setLocalData, removeLocalData} from '@/util/dkmk'
import {getTreeInforByList} from '@/util/common'
import {BASE_TITLE} from './config'
const openedTabsKey = 'user-opened-tabs'
const seleteTabKey = 'user-selete-tab'


//菜单类型 1目录 2菜单
export enum MenuType{CATALOG='1', MENU='2'}

//路由携带信息
export interface RouterMeta{
  //路由标签
  label:string
  //菜单id
  menuId?:string
  //是否在侧边栏隐藏
  hide?:boolean
  //菜单类型
  menuType?:MenuType
  //图标
  icon?:string
}
//菜单信息
export interface MenuView extends RouterMeta{
  //路径
  path:string
  //编码
  code:string
  //依赖
  require?:string
  //下移
  redirect?:string
  //路由参数
  query?:Dictionary<boolean>
  //子路由
  children?:Array<MenuView>
  //组件
  component?:RouteComponent
}

//默认首页
export const WelcomeView:MenuView = {
  label:'首页',
  path:'/welcome',
  code:'Welcome',
  icon:'ChatDotSquare',
  menuType:MenuType.MENU,
  hide:true
}

interface JumpMenu{
  code:string,
  query?:Dictionary<boolean>
}
interface NavState{
  //导航菜单
  navMenu:Array<MenuView>|null
  //导航菜单扁平数据(路由名称散列)
  navMenuHash:Dictionary<MenuView>|null
  //当前导航菜单名
  navTabSelete:string|null
  //当前打开的Tab名称数组
  navTabOpenArr:Array<string>|null
  //页面加载状态
  navLoading:boolean
  //进入主要跳转
  navJumpMenu:JumpMenu|null
}

const navStore = defineStore('navStore', {
  state:():NavState => {
    return {
      navMenu:null,
      navMenuHash:null,
      navTabSelete:null,
      navTabOpenArr:null,
      navLoading:false,
      navJumpMenu:null
    }
  },
  getters:{
    //当前选中的菜单信息
    getNavOpenedTab:(state) => {
      if (!state.navMenuHash || !state.navTabSelete) return null
      else return state.navMenuHash[state.navTabSelete]
    },
    //根据code获取TAB信息
    getNavTabByCode:(state) => {
      return (code:string|null) => {
        if (!code || !state.navMenuHash) return null
        else return state.navMenuHash[code]
      }
    },
    //当前打开Tab里的索引
    getNavTabIndex:(state) => {
      return (code:string|null) => {
        if (!code || !state.navTabOpenArr) return -1
        else return state.navTabOpenArr.indexOf(code)
      }
    }
  },
  actions:{
    //导航菜单扁平数据
    setNavTabsHash() {
      if (!this.navMenu) return
      this.navMenuHash = {}
      const list:Array<MenuView> = getTreeInforByList(this.navMenu)
      for (const index in list) {
        const item = list[index]
        this.navMenuHash[item.code] = item
      }
    },
    //设置导航菜单
    setNavTabs(navMenu:Array<MenuView>) {
      this.navMenu = navMenu
      this.setNavTabsHash()
    },
    //设置当前打开的Tab
    setNavSeleteTab(code:string) {
      if (this.navTabSelete === code) return
      if (!this.navTabOpenArr) this.navTabOpenArr = []
      const index = this.navTabOpenArr.indexOf(code)
      if (index === -1) this.navTabOpenArr.push(code)
      this.navTabSelete = code
      //设置标题
      const menuView = this.getNavTabByCode(code)
      if (menuView) {
        document.title = menuView.label + '-' + BASE_TITLE
      }
      setLocalData(seleteTabKey, code)
      setLocalData(openedTabsKey, this.navTabOpenArr.join(','))
    },
    //设置打开的TABS
    setNavOpenTabs(tabCodes:Array<string>) {
      //处理边界情况
      const tabs:Array<string> = []
      tabCodes.forEach((code:string) => {
        if (this.navMenuHash && this.navMenuHash[code]) {
          tabs.push(code)
        }
      })
      this.navTabOpenArr = tabs
      setLocalData(openedTabsKey, tabs.join(','))
    },
    //关闭
    closeTab(code:string) {
      if (!this.navTabOpenArr) return
      const index = this.navTabOpenArr.indexOf(code)
      if (index === -1) return
      this.navTabOpenArr.splice(index, 1)
      //处理边界情况
      if (this.navTabSelete === code) {
        const current = this.navTabOpenArr[index - 1] ? this.navTabOpenArr[index - 1] : this.navTabOpenArr[index + 1]
        if (current) {
          this.setNavSeleteTab(current)
        }
      }
    },
    //关闭其他
    closeOtherTab() {
      if (!this.navTabOpenArr) return
      if (!this.navTabSelete) return
      this.navTabOpenArr = this.navTabSelete === WelcomeView.code ? [WelcomeView.code] : [WelcomeView.code, this.navTabSelete]
    },
    //前进
    forwardTab() {
      if (!this.navTabOpenArr) return
      if (!this.navTabSelete) return
      let index = this.navTabOpenArr.indexOf(this.navTabSelete) + 1
      const len = this.navTabOpenArr.length
      if (index === len) index = 0
      this.navTabSelete = this.navTabOpenArr[index]
    },
    //后退
    backTab() {
      if (!this.navTabOpenArr) return
      if (!this.navTabSelete) return
      let index = this.navTabOpenArr.indexOf(this.navTabSelete) - 1
      const len = this.navTabOpenArr.length
      if (index === -1) index = len - 1
      this.navTabSelete = this.navTabOpenArr[index]
    }
  }
})

export default {
  setup() {
    const store = navStore()
    //初始化
    const init = (navMenu:Array<MenuView>, closeTabs:Array<string>) => {
      store.setNavTabs(navMenu)
      //用户打开的TAB
      const tabsStr = getLocalData(openedTabsKey)
      let tabs:Array<string> = []
      if (!tabsStr) tabs = [WelcomeView.code]
      else tabs = tabsStr.split(',')
      closeTabs.forEach((item) => {
        const index = tabs.indexOf(item)
        if (index !== -1) {
          tabs.splice(index, 1)
        }
      })
      if (tabs.indexOf(WelcomeView.code) === -1) {
        tabs.unshift(WelcomeView.code)
      }
      store.setNavOpenTabs(tabs)
      //用户当前选择的tab
      const tab = getLocalData(seleteTabKey)
      //边界处理
      if (tab && store.navMenuHash && store.navMenuHash[tab]) {
        const tabIndex = tabs.indexOf(tab)
        if (tabIndex !== -1) {
          store.setNavSeleteTab(tab)
        } else {
          const openTab = tabs.length ? tabs[tabs.length - 1] : WelcomeView.code
          store.setNavSeleteTab(openTab)
        }
      } else {
        store.setNavSeleteTab(WelcomeView.code)
      }
    }
    //重置数据
    const reset = () => {
      store.navMenu = null
      store.navMenuHash = null
      store.navTabSelete = null
      store.navTabOpenArr = null
      store.navJumpMenu = null
      removeLocalData(seleteTabKey)
      removeLocalData(openedTabsKey)
    }
    return {store, init, reset}
  }
}